﻿<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta name="keywords" content="天地图"/>
	<title>天地图－地图API－范例－基本地图</title>
	<link rel="stylesheet" type="text/css" href="http://api.tianditu.com/api-new/css/shCore.css" />
    <script src="http://api.tianditu.com/api-new/js/scale.fix.js"></script>
    <script src="http://api.tianditu.com/api-new/js/jquery-1.6.4.min.js"></script>
    <!--[if lt IE 9]>
    <script src="../js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://api.tianditu.com/api-new/js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api-new/js/allscript.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api-new/api/js/maps.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api-new/js/showCode.js"></script>
	<script type="text/javascript" id = "codetoshow">
	var map;
	var zoom = 12;

//添加标记工具使用
var markerTool,marker;
var listener = null;

// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();

// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
   // will store the reference to the XMLHttpRequest object
   var xmlHttp;
   // if running Internet Explorer
   if(window.ActiveXObject)
   {
      try
      {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
         xmlHttp = false;
      }
   }
   // if running Mozilla or other browsers
   else
   {
      try
      {
         xmlHttp = new XMLHttpRequest();
      }
      catch (e)
      {
         xmlHttp = false;
      }
   }
   // return the created object or display an error message
   if (!xmlHttp)
      alert("Error creating the XMLHttpRequest object.");
   else
      return xmlHttp;
}

function onLoad()
{
	
	var config = {
		//projection: "EPSG:900913" //球面墨卡托投影
		projection: "EPSG:4326" //经纬度投影
	}

	//初始化地图对象
	map=new TMap("mapDiv");
	//设置显示地图的中心点和级别
	map.centerAndZoom(new TLngLat(114.40969,30.50945),zoom);
	//允许鼠标双击地图放大
	map.enableDoubleClickZoom()

	//允许鼠标滚轮缩放地图
	map.enableHandleMouseScroll();

	//控制是否允许鼠标惯性拖拽地图
	map.enableInertia();//map.disableInertia()


	//控制是否允许键盘操作地图(WASD键或Home/End/PageU/PageD大跳，方向键小跳，+/-缩放)
	map.enableHandleKeyboard();//map.disableHandleKeyboard()


	{//添加缩放平移控件
		var config = {
			type:"TMAP_NAVIGATION_CONTROL_LARGE",	//缩放平移的显示类型
			anchor:"TMAP_ANCHOR_TOP_RIGHT",			//缩放平移控件显示的位置
			offset:[0,50],							//缩放平移控件的偏移值
			showZoomInfo:true						//是否显示级别提示信息，true表示显示，false表示隐藏。
		};
		//创建缩放平移控件对象
		control=new TNavigationControl(config);
		//添加缩放平移控件
		map.addControl(control);
	}

	{//添加比例尺控件
		//创建比例尺控件对象
		var scale = new TScaleControl();
		map.addControl(scale);
	}

	{//创建右键菜单对象
		var menu  = new TContextMenu();
		var txtMenuItem = [
			{
				text:'放大',
				callback:function(){map.zoomIn()}
			},
			{
				text:'缩小',
				callback:function(){map.zoomOut()}
			},
			{
				text:'放置到最大级',
				callback:function(){map.setZoom(18)}
			},
			{
				text:'查看全国',
				callback:function(){map.setZoom(4)}
			},
			{
				text:'获得右键点击处坐标',
				callback:function(lnglat){
					alert(lnglat.getLng()+","+lnglat.getLat());
				}
			}
		];
		for(var i=0; i < txtMenuItem.length; i++)
		{
			//创建右键菜单参数接口对象
			var options = new TMenuItemOptions();
			//设置右键菜单的宽度
			options.width = 100;
			//添加菜单项
			menu.addItem(new TMenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,options));
			if(i==1 || i==3)
			{
				//添加分割线
				menu.addSeparator();
			}
		}
		//添加右键菜单
		map.addContextMenu(menu);
	}

	{//添加鹰眼控件

		var config = {
			anchor: "TMAP_ANCHOR_BOTTOM_RIGHT",	//设置鹰眼位置,"TMAP_ANCHOR_TOP_LEFT"表示左上，"TMAP_ANCHOR_TOP_RIGHT"表示右上，"TMAP_ANCHOR_BOTTOM_LEFT"表示左下，"TMAP_ANCHOR_BOTTOM_RIGHT"表示右下，"TMAP_ANCHOR_LEFT"表示左边，"TMAP_ANCHOR_TOP"表示上边，"TMAP_ANCHOR_RIGHT"表示右边，"TMAP_ANCHOR_BOTTOM"表示下边，"TMAP_ANCHOR_OFFSET"表示自定义位置,默认值为"TMAP_ANCHOR_BOTTOM_RIGHT"
			size  : new TSize(180,120),			//鹰眼显示的大小
			isOpen : true						//鹰眼是否打开，true表示打开，false表示关闭，默认为关闭
		};
		//创建鹰眼控件对象
		overviewMap = new TOverviewMapControl(config);
		map.addControl(overviewMap);			//启用鹰眼控件
	}

	{//创建版权控件对象
		var control=new TCopyrightControl();
		//添加版权内容及事件
		control.addCopyright({id:1,content:"<a href='http://www.tianditu.cn' target='_blank' style='font-size:14;background:white'>~舞天~地形图测绘成果检索服务</a>",bounds:new TBounds(10,30,160,80)});

		//设置版权的位置
		control.setLeft(10);
		control.setTop(10);
		//添加版权控件
		map.addControl(control);
	}

	{//创建地图类型控件对象
		var control = new TMapTypeControl();
		//将地图类型控件添加到地图上
		map.addControl(control);
		//定义显示控件位置
		control.setRight(20);
		control.setTop(20);
	}


	{//向地图上添加标注
		var marker1 = new TMarker(new TLngLat(116.411794,39.9068));
		map.addOverLay(marker1);
	}

	{//创建地图文本对象
		var config = {
		//        text:"<a href='http://www.tianditu.com' target='_blank'>天地图</a>",
			text:"图号",
			offset:new TPixel(10,10),//10,10是让出标注箭头的位置
			position:new TLngLat(116.411794,39.9068)
		};
		var text=new TLabel(config);
		map.addOverLay(text);

	}

	AddLine();

	{//创建一个标注
		var marker = new TMarker(new TLngLat(116.411794,39.9068));
		map.addOverLay(marker);
		//设置信息窗口
		var infoWin=marker.openInfoWinHtml("图号：<br>比例尺：");
		infoWin.setTitle("图号");
	}

	if(0) {//启动添加标记工具
		markerTool = new TMarkTool(map);
		TEvent.bind(markerTool,"mouseup",markerTool,mouseup);   
		markerTool.open();
	}

	TEvent.addListener( map, "move", afterMove );
	TEvent.addListener( map, "zoomend", afterZoomEnd );
}

function afterZoomEnd()
{
	var scale = GetScaleCheckedValue();
	var zoom = map.getZoom();
	document.getElementById("wt_zoom").value = zoom;
}                                           

function GetScaleCheckedValue()
{
	var radios = document.getElementsByName("wt_scale");
	for (var i = 0; i < radios.length; i++)
	{
		var radio = radios[i];
		if (radio.checked) {           //判断是否选中
			var scale = Number(radio.value);
			
			var zoom = map.getZoom();
			if( zoom<= 6 && scale<=500000 ) scale = 1000000;
			if( zoom<= 7 && scale<=250000 ) scale =  500000;
			if( zoom<= 8 && scale<=100000 ) scale =  250000;
			if( zoom<= 9 && scale<= 50000 ) scale =  100000;
			if( zoom<=11 && scale<= 10000 ) scale =   50000;
			document.getElementById("wt_curScale").value = scale;
			
			return scale;
		}
	}
}

function afterMove()
{
	var cent = map.getCenter();
	var bound = map.getBounds();
	var r = bound.getNorthEast().getLng();
	var l = bound.getSouthWest().getLng();
	var t = bound.getNorthEast().getLat();
	var b = bound.getSouthWest().getLat();
	var pxl = map.getZoomUnits();
	var scale = GetScaleCheckedValue();
	
	var url = "GetMapsByRange.php?lon="+l+"&lat="+b+"&dlon="+(r-l)+"&dlat="+(t-b)+"&scale="+scale;
	xmlHttp.open( "GET", url, true );
	xmlHttp.onreadystatechange = GetMapRangeOK; //判断浏览器状态栏（接收完数据时触发的事件）
	xmlHttp.send(null);
}

function GetMapRangeOK()
{
	if( xmlHttp.readyState == 4 && xmlHttp.status == 200 )//表示数据接收完成
	{
		//document.getElementById("wt_mapname").innerHTML = xmlHttp.responseText;

		map.clearOverLays();
		
		var i;
		var mapAry = xmlHttp.responseText.split(";");
		for (i in mapAry)
		{
			var url = "InputName.php?name="+mapAry[i];
			xmlHttp.open( "GET", url, false );
			xmlHttp.onreadystatechange = GetMapInfoOK; //判断浏览器状态栏（接收完数据时触发的事件）
			xmlHttp.send(null);
		}
	}
}

function GetMapInfoOK()
{
	if( xmlHttp.readyState == 4 && xmlHttp.status == 200 )//表示数据接收完成
	{
		//document.getElementById("wt_mapname").innerHTML = xmlHttp.responseText;
		
		var lon0, lat0, dLon, dLat;
		var i;
		var count=0;
		var info = xmlHttp.responseText.split(";");
		for (i in info)
		{
			var str = info[i];
			if( str.indexOf("lat0")>0 )
			{
				lat0 = Number( str.split(" ")[3] );
				++count;
			}
			if( str.indexOf("lon0")>0 )
			{
				lon0 = Number( str.split(" ")[3] );
				++count;
			}
			if( str.indexOf("dLat")>0 )
			{
				dLat = Number( str.split(" ")[3] );
				++count;
			}
			if( str.indexOf("dLon")>0 )
			{
				dLon = Number( str.split(" ")[3] );
				++count;
			}
		}
		if( count==4 )
		{
			var points = [];
			points.push( new TLngLat(lon0, lat0 ));
			points.push( new TLngLat(lon0, lat0+dLat ));
			points.push( new TLngLat(lon0+dLon, lat0+dLat ));
			points.push( new TLngLat(lon0+dLon, lat0 ));
			var polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
			map.addOverLay( polygon );
		}
	}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////
// begin //from 百度地图坐标与像素互相转换的方法
/*
pixelToPoint = function(point, zoom, center, bounds) {
    // 像素到坐标
    if (!point) {
        return
    }
    var zoomUnits = getZoomUnits(zoom);
    var mercatorLng = center.lng + zoomUnits * (point.x - bounds.width / 2);
    var mercatorLat = center.lat - zoomUnits * (point.y - bounds.height / 2);
    var mercatorLngLat = {lng: mercatorLng, lat: mercatorLat};
    return mercatorToLngLat(mercatorLngLat)
}
 
pointToPixel = function(point, zoom, mCenter, bounds) {
    // 坐标到像素
    if (!point) {
        return
    }
    point = lngLatToMercator(point);
    var units = getZoomUnits(zoom);
    var x = Math.round((point.lng - mCenter.lng) / units + bounds.width / 2);
    var y = Math.round((mCenter.lat - point.lat) / units + bounds.height / 2);
    return {x: x, y: y}
}

mercatorToLngLat = function(mLngLat) {
    var absLngLat, mc;
    absLngLat = {
        lng: Math.abs(mLngLat.lng),
        lat: Math.abs(mLngLat.lat)
    };
    for (var i = 0; i < MCBAND.length; i++) {
        if (absLngLat.lat >= MCBAND[i]) {
            mc = MC2LL[i];
            break
        }
    }
    var lngLat = convertor(mLngLat, mc);
    var lngLat = {
        lng: lngLat.lng.toFixed(6),
        lat: lngLat.lat.toFixed(6)
    };
    return lngLat
}
 
lngLatToMercator = function(point) {
    var lng_lat, mc;
    point.lng = getLoop(point.lng, -180, 180);
    point.lat = getRange(point.lat, -74, 74);
    lng_lat = {
        lng: point.lng,
        lat: point.lat
    };
    for (var i = 0; i < LLBAND.length; i++) {
        if (lng_lat.lat >= LLBAND[i]) {
            mc = LL2MC[i];
            break
        }
    }
    if (!mc) {
        for (var i = LLBAND.length - 1; i >= 0; i--) {
            if (lng_lat.lat <= -LLBAND[i]) {
                mc = LL2MC[i];
                break
            }
        }
    }
    var cE = convertor(point, mc);
    var lng_lat = {
        lng: cE.lng.toFixed(2),
        lat: cE.lat.toFixed(2)
    };
    return lng_lat
}
 
getLoop = function(lng, a, b) {
    while (lng > b) {
        lng -= b - a
    }
    while (lng < a) {
        lng += b - a
    }
    return lng
}
 
getRange = function(lat, a, b) {
    if (a != null) {
        lat = Math.max(lat, a)
    }
    if (b != null) {
        lat = Math.min(lat, b)
    }
    return lat
}
 
convertor = function(point, mc) {
    if (!point || !mc) {
        return
    }
    var lng = mc[0] + mc[1] * Math.abs(point.lng);
    var c = Math.abs(point.lat) / mc[9];
    var lat = mc[2] + mc[3] * c + mc[4] * c * c + mc[5] * c * c * c + mc[6] * c * c * c * c + mc[7] * c * c * c * c * c + mc[8] * c * c * c * c * c * c;
    lng *= (point.lng < 0 ? -1 : 1);
    lat *= (point.lat < 0 ? -1 : 1);
    return {lng: lng, lat: lat}
}
 
 
MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]
LLBAND = [75, 60, 45, 30, 15, 0]
MC2LL = [
    [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843, -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2],
    [ - 7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86], 
    [ - 3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37],
    [ - 1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06],
    [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4],
    [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]
]
LL2MC = [
    [ - 0.0015702102444, 111320.7020616939, 1704480524535203, -10338987376042340, 26112667856603880, -35149669176653700, 26595700718403920, -10725012454188240, 1800819912950474, 82.5],
    [0.0008277824516172526, 111320.7020463578, 647795574.6671607, -4082003173.641316, 10774905663.51142, -15171875531.51559, 12053065338.62167, -5124939663.577472, 913311935.9512032, 67.5],
    [0.00337398766765, 111320.7020202162, 4481351.045890365, -23393751.19931662, 79682215.47186455, -115964993.2797253, 97236711.15602145, -43661946.33752821, 8477230.501135234, 52.5],
    [0.00220636496208, 111320.7020209128, 51751.86112841131, 3796837.749470245, 992013.7397791013, -1221952.21711287, 1340652.697009075, -620943.6990984312, 144416.9293806241, 37.5],
    [ - 0.0003441963504368392, 111320.7020576856, 278.2353980772752, 2485758.690035394, 6070.750963243378, 54821.18345352118, 9540.606633304236, -2710.55326746645, 1405.483844121726, 22.5],
    [ - 0.0003218135878613132, 111320.7020701615, 0.00369383431289, 823725.6402795718, 0.46104986909093, 2351.343141331292, 1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]
]
*/
// end //from 百度地图坐标与像素互相转换的方法
//////////////////////////////////////////////////////////////////////

function addNavControl()
{
    map.removeControl(control);
    //获得缩放平移控件的样式
    var selectNavCss = document.getElementById("selectnavcss");
    var index = selectNavCss.selectedIndex;
    var controlCss = selectNavCss.options[index].value;
    //获得缩放平移控件的位置
    var selectNavPosition = document.getElementById("selectnavposition");
    var index = selectNavPosition.selectedIndex;
    var controlPosition = selectNavPosition.options[index].value;
    //添加缩放平移控件
    var config = {
        type:controlCss,		//缩放平移控件的显示类型
        anchor:controlPosition	//缩放平移控件显示的位置
    };
    control = new TNavigationControl(config);
    map.addControl(control);
}

function FlyToPos()
{
	map.panTo(new TLngLat(116.64899,40.12948));   //移动到北京顺义
}

function JumpToPos()
{
	   	//设置显示地图的中心点和级别
	map.centerAndZoom(new TLngLat(114.40969,30.50945),zoom);
}

function setCenterAndZoom()
{
	var lng = document.getElementById("wt_lng").value;
	var lat = document.getElementById("wt_lat").value;
	var zoom = document.getElementById("wt_zoom").value;
	map.setCenter(new TLngLat(lng,lat));	//将地图定位到北京顺义
	map.setZoom(zoom);  //将视图切换到指定的缩放等级，中心点坐标不变
}

function AddLine()
{
	var points = [];
	points.push(new TLngLat(116.41136,39.97569));
	points.push(new TLngLat(116.411794,39.9068));
	points.push(new TLngLat(116.32969,39.92940));
	points.push(new TLngLat(116.385438,39.90610));
	//线
	//	    var polygon = new TPolyline(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
	//多边形
	var polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});

	//polygon.setStrokeWeight(3);
	//polygon.setStrokeColor("red");	//设置边线颜色
	//polygon.setFillColor("yellow");	//设置填充颜色
	//polygon.setStrokeOpacity(0.3);	//设置边线透明度
	//polygon.setFillOpacity(0.5);
	//polygon.setStrokeStyle("dashed");
	map.addOverLay(polygon);
}

function AddRect()
{

	var config = {
		strokeColor:"blue",	//折线颜色
		fillColor:"#FFFFFF",	//填充颜色。当参数为空时，折线覆盖物将没有填充效果
		strokeWeight:"5px",	//折线的宽度，以像素为单位
		opacity:0.5,	//折线的透明度，取值范围0 - 1
		strokeStyle:"solid"	//折线的样式，solid或dashed
	};
	var bounds = new TBounds(116.36231,39.87784,116.43954,39.92841);
	var rect = new TRect(bounds,config);
	map.addOverLay(rect);

	//向地图上添加椭圆
	//    var ellipse = new TEllipse(bounds,config);
	//    map.addOverLay(ellipse);
}

///////////////////////////////////////////////////////////////////////
//添加标记工具

//鼠标在地图上按下左键时添加一个点标记
function mouseup(point)
{
	marker = new TMarker(point);
	map.addOverLay(marker);
	markerTool.close();
}

//启动编辑点标记
function edit()
{
	if(marker==null){
		alert('请先画点再进行编辑！');
		return;
	}
	else{
		marker.enableEdit();
		listener=TEvent.bind(marker,"dragend", marker, function(lnglat){
			marker.disableEdit();
			TEvent.removeListener(listener);  
			alert(lnglat.getLng()+","+lnglat.getLat());      		
		});
	}
}
///////////////////////////////////////////////////////////////////////

</script>
</head>
<body>
<div id="outter">
    <div id="mapDiv"></div>

    <div id="describediv" style="width:200px; margin-right:50px;">
        设置地图中心点的经纬度坐标及缩放级别<br>
        经度<input id="wt_lng" type="text" value="114.44899" style="width:120px;"><br/>
        纬度<input id="wt_lat" type="text" value="30.50948"  style="width:120px;"><br/>
        缩放级别<input id="wt_zoom" type="text" value="12"  style="width:90px;"><br/>
        <input type="button" value="设置" onclick="setCenterAndZoom()"/>
		
		
		<br/>
        当前图幅框比例尺<input id="wt_curScale" type="text" value="50000"  style="width:90px;"><br/>
		一百万  <input type="radio" id="wt_scale1" name="wt_scale" onclick="afterMove()" value="1000000"> 
		五十万  <input type="radio" id="wt_scale2" name="wt_scale" onclick="afterMove()" value="500000"> 
		二十五万<input type="radio" id="wt_scale3" name="wt_scale" onclick="afterMove()" value="250000"> 
		十万    <input type="radio" id="wt_scale4" name="wt_scale" onclick="afterMove()" value="100000"> 
		五万    <input type="radio" id="wt_scale5" name="wt_scale" onclick="afterMove()" value="50000" checked> 
		一万    <input type="radio" id="wt_scale6" name="wt_scale" onclick="afterMove()" value="10000" > 
		<br/>                                                                            
		
 		<p id="wt_mapname" >
			<script type="text/javascript" >
				<?php
					$name = H50H072015; 
					$lon = 114.44899; 
					$lat = 30.50948; 
					$dlon = 1; 
					$dlat = 1; 
					$scale = 1000000;
				?>
				//直接用PHP语言调外部程序计算
				var mapAry = "<?php
					//$cmd = sprintf("GetMapNumber.exe --GetMapsByRange %f %f %f %f %d", $lat, $lon, $dlat, $dlon, $scale); system($cmd);
					?>";
				document.write(mapAry);
			</script>
		</p> 

    </div>
    <div id="close" style="margin-right:50px;"></div>

</div>
</body>
</html>